<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 引用模板 Header -->
    <div th:insert="bg/publicHead :: publicHead(${pageName})"></div>
    <!-- [ Header ] end -->

    <link rel="stylesheet" href="/css/base.css" type="text/css" />
    <style type="text/css">
        .bodybg{ background:url('../bgTemplate/image/hero-1.jpg')}
    </style>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/sweetalert.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>
    <script th:inline="javascript">
        window.onerror=function(){return true;};
        var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
        var firstId=null;
        var firstValue=null;
        var secondId=null;
        var secondValue=null;
        $(document).ready(function() {

            //主类选择
            $("#firstClass").change(async function(){
                var targetObj=$(this).find("option:selected");
                firstId=targetObj.val();
                firstValue=targetObj.text();
                secondValue=""; //清空二级分类
                console.log("下拉选择",firstId,firstValue);
                //查询二级分类
                var addData={
                    id:firstId,
                    fistclass:firstValue,
                };
                var res=await SyncJson("/api/getSecondClass",addData);
                console.log("查询二级分类",res);
                $("#secondClassSelect").empty();
                if(res.code===200){
                    $(".secondClass").css("display","flex");
                    $("#secondClassSelect").append("<option value='0' selected='selected'>选择</option>");
                    if(res.result.length>0){
                        for (var i = 0; i < res.result.length; i++) {
                            console.log(res.result[i].secondclass);
                            $("#secondClassSelect").append("<option value='"+res.result[i].id+"'>"+res.result[i].secondclass+"</option>");
                        }
                    }
                }

                /*articleId=$(this).find("option:selected").attr("articleId");
                if(articleId===undefined) articleId="";
                console.log("文章id:",articleId);*/
            });


            //二级分类选择
            $("#secondClassSelect").change(function(){
                var targetObj=$(this).find("option:selected");
                secondId=targetObj.val();
                secondValue=targetObj.text();
            });




            //发布
            $(".addBtn").click(async function(){
                if(firstValue===null || firstId===null){
                    swal("请选择主类", "请选择", "error");
                    return;
                }
                if(/\S/.test(firstValue)===false){
                    swal("请选择主类", "请下拉选择", "error");
                    return;
                }
                if(firstValue==='选择' || firstValue==='0' || firstValue===0){
                    swal("请选择主类", "请选择", "error");
                    return;
                }


                if(secondValue===null || secondId===null){
                    swal("请选择二级分类", "请选择", "error");
                    return;
                }
                if(/\S/.test(secondValue)===false){
                    swal("请选择二级分类", "请选择", "error");
                    return;
                }
                if(secondValue==='选择' || secondValue==='0' || secondValue===0){
                    swal("请选择二级分类", "请选择", "error");
                    return;
                }
                console.log("secondValue====>",secondValue)
                var thirdData=$(".thirdClasstitle").val();
                if(/\S/.test(thirdData)===false){
                    swal("请输入三级分类", "请输入", "error");
                    return;
                }
                if (confirm("是否添加三级分类?")) {
                    var addData={
                        firstid:firstId,
                        firstclass:firstValue,
                        secondid:secondId,
                        secondclass:secondValue,
                        thirdclass:thirdData
                    };
                    //console.log("上传参数:",addData);
                    if(addData!=null){
                        var res=await SyncJson("/api/addThirdClass",addData);
                        if(res.code===200){
                            alert("三级分类添加成功");
                            window.location.href="/bg/addFirstClass" //跳回一级分类
                        }
                    }
                }
            });
        });
    </script>
</head>


<body class="bodybg">
<!-- [ Main Content ] start -->
<div class="contain">
    <h4>添加三级分类</h4>
    <div class="doctors">
        <div class="tables">
            <div class="text">选择主类:</div>
            <div class="input">
                <select id="firstClass" class="form-control">
                    <option value="选择主类" selected="">选择</option>
                    <!-- 更新时显示 -->
                    <option th:if="${FirstType != null}" th:each="item:${FirstType}" th:value="${item.id}" th:text="${item.firstclass}"></option>
                </select>
            </div>
        </div>
        <div class="tables secondClass" style="display:none;">
            <div class="text">二级分类:</div>
            <div class="input">
                <select id="secondClassSelect" class="form-control"></select>
            </div>
        </div>
        <div class="tables">
            <div class="text">三级类名:</div>
            <div class="input"><input type="text" class="thirdClasstitle"></div>
        </div>
        <div class="tables" style="border-bottom:0px; margin-top:20px;">
            <div class="text"><a class="addBtn">添加</a></div>
            <div class="input"></div>
        </div>
    </div>
</div>
<!--中间 End -->
</body>



</html>